<%- include("./layouts/header.ejs")%>

  <div class="main">

   <%- include("./layouts/navBar.ejs")%>

    <div class="container-fluid">
      <div class="page-title">
        <h1>分类目录</h1>
      </div>
      <!-- 有错误信息时展示 -->
      <!-- <div class="alert alert-danger">
        <strong>错误！</strong>发生XXX错误
      </div> -->
      <div class="row">
        <div class="col-md-4">
          <form id="myForm">
            <h2>添加新分类目录</h2>
            <div class="form-group">
              <label for="name">名称</label>
              <input id="name" class="form-control" name="name" type="text" placeholder="分类名称">
            </div>
            <div class="form-group">
              <label for="slug">别名</label>
              <input id="slug" class="form-control" name="slug" type="text" placeholder="slug">
              <p class="help-block">https://zce.me/category/<strong>slug</strong></p>
            </div>
            <div class="form-group">
              <button class="btn btn-primary" id="btnAdd" type="submit">添加</button>
              <!-- <input class="btn btn-primary" id="btnAdd" type="button" value="添加" /> -->
            </div>
          </form>
        </div>
        <div class="col-md-8">
          <div class="page-action">
            <!-- show when multiple checked -->
            <a class="btn btn-danger btn-sm" href="javascript:;" style="display: none" id="delMore">批量删除</a>
          </div>
          <table class="table table-striped table-bordered table-hover">
            <thead>
              <tr>
                <th class="text-center" width="40"><input type="checkbox" id="chkToggle"></th>
                <th>名称</th>
                <th>Slug</th>
                <th class="text-center" width="100">操作</th>
              </tr>
            </thead>
            <tbody>
              
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

 <%- include("./layouts/aside.ejs")%>

<%- include("./layouts/footer.ejs")%>

<!-- 右侧分类列表的模板 -->
<script type="text/template" id="categoriesListTmp">
    {{each data as item key}}
    <tr>
      <td class="text-center"><input type="checkbox" data-id="{{item.id}}" class="chkDel"></td>
      <td>{{item.name}}</td>
      <td>{{item.slug}}</td>
      <td class="text-center">
        <a href="javascript:;" id="btnEdit" data-id="{{item.id}}" class="btn btn-info btn-xs">编辑</a>
        <a href="javascript:;" id="btnDel" data-id="{{item.id}}" class="btn btn-danger btn-xs">删除</a>
      </td>
    </tr>
    {{/each}}
</script>

<!-- 编辑左侧分类信息模板 -->
<script type="text/template" id="categoriesInfoTmp">
   <h2>编辑分类目录</h2>
   <input type="hidden" name="id" value="{{id}}">
  <div class="form-group">
    <label for="name">名称</label>
    <input id="name" class="form-control" value="{{name}}" name="name" type="text" placeholder="分类名称">
  </div>
    <div class="form-group">
      <label for="slug">别名</label>
      <input id="slug" class="form-control" value="{{slug}}" name="slug" type="text" placeholder="slug">
      <p class="help-block">https://zce.me/category/<strong>slug</strong></p>
    </div>
    <div class="form-group">
        <!-- <button class="btn btn-primary" id="btnUpdate" type="button">更新</button> -->
      <input class="btn btn-primary" id="btnUpdate" type="button" value="更新" />
    </div>
</script>

  <!-- 此处的模板是在分类更新后还原回添加状态时的模板 -->
  <script type="text/template" id="categoriesLeftTmp">
      <h2>添加新分类目录</h2>
      <div class="form-group">
        <label for="name">名称</label>
        <input id="name" class="form-control" name="name" type="text" placeholder="分类名称">
      </div>
      <div class="form-group">
        <label for="slug">别名</label>
        <input id="slug" class="form-control" name="slug" type="text" placeholder="slug">
        <p class="help-block">https://zce.me/category/<strong>slug</strong></p>
      </div>
      <div class="form-group">
        <!-- <button class="btn btn-primary" type="submit">添加</button> -->
        <input class="btn btn-primary" id="btnAdd" type="button" value="添加" />
      </div>
  </script>

<script>
  //1.刷新页面即发送异步请求后端数据
  $.ajax({
    type: "get",
    url:"/getAllCategoriesInfo",
    dataType: "json",
    success: function(res){
      if(res && res.code==0){
        var htmlStr = template("categoriesListTmp",res)
        $("tbody").html(htmlStr)
      }
    }
  })

  //2.添加分类
  //注册事件,以委托的方式
  $("#myForm").on("click","#btnAdd",function(){
    //阻止按钮点击form表单默认行为
    // e.preventDefault()

    //发送异步ajax请求
    $.ajax({
      //请求的信息
      type: "post",
      url: "/addCategoriesInfo",
      data: $("#myForm").serialize(), // 表单序列化,获取form表单input标签中带有name属性的值
      dataType: "json",
      success: function(res){
        if(res && res.code == 0){
          // 调用art-template方法template()渲染页面
          var htmlStr = template("categoriesListTmp",res)
          // 把页面渲染到页面上
          $("tbody").html(htmlStr)

          $("input[name]").val("") // 完成页面渲染后单元格清空
        }
      }
    })
  })

  //3. 删除分类, 通过事件委托的方式
  $("tbody").on("click","#btnDel",function(){
    // 发送异步ajax请求
    $.ajax({
      //请求的数据信息
      type: "get",
      url: "/delCategoriesInfo",
      data:{ // 传递id值,以便根据id值删除对应数据
        id: $(this).attr("data-id")
      },
      dataType: "json",
      success: function(res){
        if(res && res.code == 0){
          // 把返回的数据调用art-template模板template()方法渲染页面数据
          var htmlStr = template("categoriesListTmp",res)
          // 渲染页面
          $("tbody").html(htmlStr)
        }
      }
    })
  })

  //4.编辑分类
  $("tbody").on("click","#btnEdit",function(){
    //发送异步ajax请求
    $.ajax({
      type: "get",
      url: "/editCategoriesInfo",
      data: {
        id:$(this).attr("data-id")
      },
      dataType: "json",
      success: function(res){
        if(res && res.code==0){
          //准备模板
          var htmlStr = template("categoriesInfoTmp",res.data[0])
          //渲染到页面
          $("#myForm").html(htmlStr)
        }
      }
    })
  })

  //5.更新内容数据
  //5.1 注册事件,给更新按钮注册事件
  $("#myForm").on("click","#btnUpdate",function(){
    //5.2发送异步ajax请求
    $.ajax({
      //请求的数据
      type: "post",
      url: "/updateCategoriesInfo",
      data: $("#myForm").serialize(), // 表单序列化
      dataType: "json",
      success: function(res){
        // 调用模板,渲染返回的数据
        var htmlStr = template("categoriesListTmp",res)
        // 渲染页面
        $("tbody").html(htmlStr)

        // 提交完数据渲染结束,把左侧回复添加的状态
        var htmlStr1 = template('categoriesLeftTmp', {})
        $('#myForm').html(htmlStr1)
      }
    })
  })

  //6.全选或全部选
  $("#chkToggle").on("click",function(){
    // 获取当前总复选框的状态
    var flag = $(this).prop("checked"); // selected checked diabled 属性的值只能用prop()方法获取
    // 让所有的小复选框的状态与复选框一致
    $(".chkDel").prop("checked",flag)
    // 让批量删除按钮跟进flag的状态设置显示或隐藏
    flag? $("#delMore").fadeIn():$("#delMore").fadeOut()
  })

  //7. 给所有小复选框注册事件,当小复选框选中数量大于等于2时,批量按钮显示; 当全部小复选框选中,总复选框也为选中状态;
  //7.1 使用委托的方式注册事件,避免前后端渲染覆盖
  $("tbody").on("click",function(){
    //7.2 获取所有小复选框的数量
    var count = $(".chkDel").size(); // size()方法可获取
    //7.3 获取选中的小复选框的数量
    var num = $(".chkDel:checked").size()

    //7.4 根据小复选框选中的个数设置总复选框和批量删除按钮的状态
    num>=2? $("#delMore").fadeIn() : $("#delMore").fadeOut()
    num == count? $("#chkToggle").prop("checked",true): $("#chkToggle").prop("checked", false)
  })

  //8. 批量删除分类数据
  // 给批量删除按钮注册事件
  $("#delMore").on("click",function(){
    //8.1获取选中的小复选框的id值
    var ids = [];
    $(".chkDel:checked").each(function(key,ele){ 
      // console.log(key+"====="+ele); // key为索引值, ele为DOM对象
      ids.push($(ele).attr("data-id")) // 将选中的复选框,获取id值存入数组中
    })

    //8.2发送异步ajax请求
    $.ajax({
      //8.3 请求的数据信息
      type: "post",
      url: "/delMoreCategoriesInfo",
      data: {
        ids: ids
      },
      dataType: "json",
      success: function(res){
        //批量删除后重新获取后端数据渲染模板数据
        var htmlStr = template("categoriesListTmp",res)
        $("tbody").html(htmlStr) // 渲染到页面
      }
    })
  })
</script>


